<template>
  <div class="info_config_page">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
        class="form-inline"
      >
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="宽限期">
          <el-input
            v-model="searchForm.period"
            placeholder="请输入宽限期"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="供应商">
          <el-input
            v-model="searchForm.pay_id"
            placeholder="请输入供应商"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="上链状态">
          <el-select
            v-model="searchForm.status"
            clearable
            placeholder="请选择"
          >
            <el-option :value="0" label="未上链"></el-option>
            <el-option :value="1" label="已上链"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="应付时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" @click="search()" type="primary"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right: 15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
    </div>
    <el-table
      :data="tableData"
      border
      ref="BaseTable"
      :span-method="arraySpanMethod"
    >
      <el-table-column
        align="center"
        header-align="center"
        fixed
        prop="id"
        label="ID"
        width="60"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        fixed
        prop="order_no"
        label="订单ID"
        width="190"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="租期"
      >
        <template slot-scope="scope">
          <div v-for="item in scope.row.leaseList" :key="item.id" style="line-height: 35px">
            第{{ item.which_period }}期
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="应付租金"
      >
        <template slot-scope="scope">
          <div v-for="item in scope.row.leaseList" :key="item.id" style="line-height: 35px">
            ￥{{ item.rent }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="应付租金时间"
        width="180"
      >
        <template slot-scope="scope">
          <div v-for="item in scope.row.leaseList" :key="item.id" style="line-height: 35px">
            {{ item.begin_time }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="宽限期"
        width="100"
      >
        <template slot-scope="scope">
          <div v-for="item in scope.row.leaseList" :key="item.id" style="line-height: 35px">
            <span v-if="item.period">{{ item.period }}天</span>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        header-align="center"
        prop="chain_"
        label="供应商"
        min-width="160"
      /> -->
      <el-table-column
        align="center"
        header-align="center"
        prop="promise_chain_time"
        label="上链时间"
        width="100"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="chain_status"
        label="上链状态"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag
            class="pointer"
            :type="scope.row.chain_status === 0 ? 'primary' : 'success'"
            @click="getParams(scope.row.promise_chain_params)"
            disable-transitions
          >{{ scope.row.chain_status == 0 ? '未上链' : '已上链'}}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        header-align="center"
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.chain_status === 0 && scope.row.trade_no != '' ? true : false"
            @click="openDialog(1, scope.row)"
            type="primary"
            size="small"
          >
            上链
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <param-dialog
      :dialogVisible="dialogVisible"
      :dialogType="dialogType"
      :requestInfo="requestInfo"
      :responseInfo="responseInfo"
      @close="closeDialog"
    ></param-dialog>
  </div>
</template>

<script>
import { getPromiseList } from "@/api/lease";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import paramDialog from "./child/paramDialog.vue"
export default {
  components: { customPage, myDatePicker, paramDialog },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        orderNo: "",
        status: "",
      },
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0,  // spanArr 的索引
      dialogVisible: false,
      dialogType: 1,
      requestInfo: {},
      responseInfo: {},
    };
  },
  methods: {
    search() {
      // const pickerVal = this.$refs.myDatePicker.getVal();
      // if (pickerVal !== 'error') {
      //   this.searchForm.leaseTime = pickerVal;
      //   this.$refs.customPage.page = 1;
      //   this.getList();
      // }
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = Object.assign({});
      this.getList();
    },
    getParams(params) {
      this.dialogType = 2;
      this.dialogVisible = true
      let info = JSON.parse(params)
      this.requestInfo = info.request ? JSON.parse(info.request.biz_content) : {}
      this.responseInfo = info.response? info.response : {}
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log("row", row.leaseList, column, rowIndex, columnIndex );
      // if (columnIndex == 0 || columnIndex == 1 || columnIndex == 6 || columnIndex == 7 || columnIndex == 8 || columnIndex == 9) {
        // console.log("row",this.spanArr)
        // const _row = this.spanArr[rowIndex]
        // const _col = _row > 0 ? 1 : 0
        // return {
        //   rowspan: _row,
        //   colspan: _col
        // }
      // }
    },
    getSpanArr(data) {
      // data.sort((a, b) => {
      //   return a.which_period > b.which_period ? 1 : -1
      // })
      // this.spanArr = []
      // for (let i = 0; i < data.length; i++) {
      //   if (i === 0) {
      //     this.spanArr.push(1)
      //     this.pos = 0
      //   } else {
      //     if (data[i].trade_no === data[i - 1].trade_no) {
      //       // 如果trade_no相等就累加，并且push 0
      //       this.spanArr[this.pos] += 1
      //       this.spanArr.push(0)
      //     } else {
      //       this.spanArr.push(1)
      //       this.pos = i
      //     }
      //   }
      // }
    },
    // 获取列表
    getList() {
        const { page, pageSize } = this.$refs.customPage;
        getPromiseList({
          page,
          pageSize,
          ...this.searchForm
        }).then((res) => {
          this.tableData = res.data;
          this.total = res.total;
        });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
</style>
